<template>
    <div>
        <p v-if="list.length == 0" class="no-data">该分类下暂无商品~</p>
        <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false">
            <storeList v-for="(item,key) in list" :key="key" :item="item" :delivery="$store.getters.freight.delivery"></storeList>
        </mt-loadmore>
    </div>
</template>
<script>
import {cateidList} from '../api'
import storeList from '../components/storeList'
export default {
    data() {
        return {
            list:[],
            page:1,
            limit:10,
            allLoaded:false
        }
    },
    created(){
        this.id = this.$route.query.id;
        this.getList();
    },
    components:{
        storeList
    },
    methods:{
        loadBottom(){this.page++;this.getList()},
        getList(){
            const data = {
                token:this.$store.getters.token,
                cate_id:this.id,
                page:this.page,
                limit:this.limit,
                school_id:this.$store.getters.userInfo.school_id
            }
            cateidList(data).then(res=>{
                console.log(res);
                if(this.list.length!==0){
                    this.list = this.list.concat(res.data);
                    this.$refs.loadmore.onBottomLoaded();
                }else{
                    this.list = res.data;
                }
                // console.log(this.list);
               if(this.list.length < this.limit){
                    this.allLoaded = true;
                }
            })
        }
    }
}
</script>
<style scoped>
    .no-data{
        text-align: center;
        line-height: 6rem;
        font-weight: bolder;
        font-size: 1rem;
    }
</style>